<template>
   <div class="container">
      <div class="adress-boxs" >
          <div class="adress-have" v-if="addressList" >
              <router-link :to="{path:'/Adress',query:{userId:$route.query.userId}}" class="address-box clearfix">
                 <div class="section-line">收货人：{{addressList.personName}}
                    <div class="phone">{{addressList.phone}}</div>
                    </div>
                 <div class="address-line">收货地址：<span>{{addressList.areaCode}}</span></div>
              </router-link>
          </div>
          <div class="adress-none" v-else >
              <router-link :to="{path:'/AddAdress',query:{userId:$route.query.userId}}" class="address-box clearfix">
                  请添加地址
              </router-link>
          </div>
      </div>
      <div class="list-box" v-for="(shopInforItem,index) in shopInfor" :key="index">
        <div class="order-box">
            <div class="top">
                <div class="imgbox">
                   <img :src="shopInforItem.indentInfo.productImg" alt="">
                </div>
                <div class="text-boc">
                    <div class="titles">{{shopInforItem.indentInfo.productName}}</div>
                    <div class="price">¥{{shopInforItem.indentInfo.price}} <span>x{{shopInforItem.indentInfo.count}}</span></div>
                </div>
            </div>
            <div class="box">
                <span class="staus">{{shopInforItem.indentInfo.indentType==2?"拼团订单":'普通订单'}}</span>
                <span class="padding-r">{{shopInforItem.productLabels}}</span>
            </div>
             <div class="box">
                <span class="stauss">邮费</span>
                <span class="payTypeName">¥{{shopInforItem.product.postage}}</span>
            </div>
            <div class="box">
              <popup v-model="show1">
                <!-- group already has a top border, so we need to hide header's bottom border-->
                <popup-header
                left-text="取消"
                right-text="确认"
                title="请选择你的优惠卷"
                :show-bottom-border="false"
                @on-click-left="show1 = false"
                @on-click-right="gokey(index)"></popup-header>
                <group gutter="0">
                  <radio :options="getMyKeyon" @on-change="change"></radio>
                </group>
              </popup>
              <cell title="优惠券" :value="keyontext" is-link @click.native="getsure"></cell>
            </div>
      </div>
      <div class="order-box">
        <div class="title">订单详情</div>
         <div class="list">
             <div class="text">
               <span class="little-title">
                  订单号
               </span>
               <span class="order-texct">
                 {{shopInforItem.indentInfo.orderTradeNo}}
               </span>
             </div>
             <div class="text">
               <span class="little-title">
                  支付方式
               </span>
               <span class="order-texct">
                 微信支付
               </span>
             </div>
             <div class="text">
               <span class="little-title">
                  下单时间
               </span>
               <span class="order-texct">
                 {{shopInforItem.indentInfo.createDateName}}
               </span>
             </div>
         </div>
      </div>
      </div>
      <div class="gobuy" @click="goPay">
         去支付
      </div>
   </div>
</template>

<script>
 import {
    Tab,
    Group,
    Cell,
    CellBox,
    PopupHeader,
    Popup,
    Radio

  } from "vux";

export default {
  components: {
      CellBox,
      Cell,
      Group,
     PopupHeader, 
     Popup,
     Radio
    },
  data () {
      return {
        addressList: [],
        shopInfor:[],
        show1:false,
        keyontext:"请选择优惠卷",
        keyonnum:0,
        getMyKeyon:[],
        myKeyonLis:[],
        keyonId:'',
      }
    },
    mounted(){
       this.fetchAddressList() 
       this.getInformation()
    },
    methods:{
      getsure(){
         if(this.getMyKeyon.length>0){
             this.show1=true
         }else{
            this.$vux.toast.text('无可用优惠卷')
            self.keyontext='无可用优惠卷'
         }
        
       },
       change(value, label){
         var self=this
          self.keyontext=label
          self.keyonnum=value
         
       },
       gokey(index){
         var self=this
         self.show1 = false
         self.keyonId=self.myKeyonList[index].id
        //  self.totalPrice=self.shopText.discountPrice*self.num-self.keyonnum
       },
        getcouponUser(){   //获取可用的优惠卷
           var self=this
           var data={
             userId : this.$route.query.userId, 
             price:this.shopInfor[0].indentInfo.price*this.shopInfor[0].indentInfo.count
           }
          this.$axios.post('/device/couponUser/getMyKeyon',data).then(res=>{
               if(res.data.code==1000){
                      
                      self.myKeyonList=res.data.data
                       for(let i=0;i<res.data.data.length;i++){
                           var inf={
                             value:res.data.data[i].name,
                             key:res.data.data[i].numberValue
                           }
                         self.getMyKeyon=self.getMyKeyon.concat(inf)
                         console.log(res)
                       }
                  
                 }
             })
       },
        fetchAddressList(){  //获取地址
        this.$axios.post('/device/userAddress/findUserAddress').then(res=>{
          console.log(res)
                      console.log("11")
          if(res.data.code==1000){
              
              this.addressList = res.data.data
          }
        })
        },
        getInformation(){ //获取订单详情 
          this.$axios.post('/device/indent/getByOrder/'+this.$route.query.orderNumber).then(res=>{
          if(res.data.code==1000){
              this.shopInfor = res.data.data
              this.getcouponUser()
           }
         })
        },
         jsApiCall()
            {
              let _this=this
              WeixinJSBridge.invoke(
                    'getBrandWCPayRequest',
                    this.jsApiParameters,
                    function(res){
                        WeixinJSBridge.log(res.err_msg);
                       
                        if(res.err_msg == "get_brand_wcpay_request:ok"){
                       // alert(res.err_code+res.err_desc+res.err_msg);
                      //  _this.$router.push({ path:'/Order'})
                       _this.$router.push({path:'/paySuccess',query:{userId:_this.$route.query.userId}})
                   
                      //  window.location.href="http://www.chenyekeji.com/pinShangShop/#/?userId="+_this.$route.query.userId;
                    }else{
                        //返回跳转到订单详情页面
                        alert(支付失败);
                            
                    }
                    }
                );
            },
            callpay()
            {
                if (typeof WeixinJSBridge == "undefined"){
                    if( document.addEventListener ){
                        document.addEventListener('WeixinJSBridgeReady', this.jsApiCall, false);
                    }else if (document.attachEvent){
                        document.attachEvent('WeixinJSBridgeReady', this.jsApiCall); 
                        document.attachEvent('onWeixinJSBridgeReady', this.jsApiCall);
                    }
                }else{
                   this.jsApiCall();
                }
            },
        goPay(){
          var self=this
          if(!self.addressList){ 
               this.$vux.toast.text('请先去添加地址')   
               this.$router.push({path:"/AddAdress",query:{ userId:self.$route.query.userId,orderNumber:self.$route.query.oldshopNumber }})
          }else{
             

         let data={
            userId:this.$route.query.userId,
            orderNo:this.$route.query.orderNumber,
            userAddressId:this.addressList.id,
            couponInfoId:self.keyonId,
            totalPrice:this.shopInfor[0].indentInfo.price*this.shopInfor[0].indentInfo.count+this.shopInfor[0].product.postage*1-self.keyonnum,
            postAge:this.shopInfor[0].product.postage
         }
         this.$axios.post('/device/payOne/',data).then(res=>{
              this.jsApiParameters=res.data.finalpackage  
             this.callpay() 
                
          })

        }
        }
      }
}
</script>
<style lang="less" scoped>
.padding-r{
  padding-right:15px;
}
.adress-none{
  height:100px;
  line-height:100px;
  font-size:40px;
         color: #ffb318;
      text-align:center;
      a{
        text-align:center;
        color: #ffb318;
      }
}
.gobuy{
  text-align: center;
  line-height: 100px;
     background: #ff5958;
  color: #fff;
  position: fixed;
  bottom: 0;
  left:0;
  width: 100%;
  font-size: 30px;;
}
.staus{
  color: #eb494a;
  float: left;
}
.stauss{
  float: left;
}
.list{
  padding-bottom:30px;
}
.text{
  padding:10px 0 0 20px;
  text-align: right;
  line-height: 36px;
}
.title{
  line-height: 60px;
  text-align: left;
  font-size: 30px;
  color: #999999;
  border-bottom:2px solid #f6f6f6;
}
.little-title{
  float: left;
  font-size: 24px;
}
.payTypeName{
  color: #999999;
  text-align: right;
  padding-right:20px;
}
.order-texct{
  text-align: right;
  font-size: 24px;
  padding-right:20px;
}
 .box{
     height:60px;
     line-height: 60px;
     font-size:24px;
     text-align: right;
     .weui-cell{
       padding:0 15px 0 0;
           font-size: 24px;
       text-align: left;
     }
 }
  .top{
      display: flex;
      background: #fff;
      text-align: left;
      border-bottom:2px solid #f6f6f6;
     .imgbox{
         height:140px;
         width:140px;
         padding:20px;
         box-sizing: border-box;
         overflow: hidden;
         img{
           width:100%;
           min-height:100% ;
         }
      }
      .text-boc{
          flex: 1;
          display: flex;
          flex-flow: column; 
          .titles{
            height:90px;
            line-height: 90px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            font-size: 24px;
            color: #666666;
          }
          .price{
              font-size: 24px;
              color: #ec4a4b;
              flex:1;
              span{
                  float: right;
                  padding-right:20px;
                   color: #666666;
              }
          }
      }
  }
   .order-box{
       margin-top:20px;
       padding-left:20px;
       background: #fff;
   }
   .address-box {
    overflow: hidden;
      overflow: hidden;
      padding-top: 10px;
      text-align: left;
      background: #fff;
      display: block;
    &:after{
        content: '';
        height:25px;
        background:#f3f5f9;
        width:100%;
        position:absolute;
        bottom: 0;
        left:0;
    }
    .left {
      position: absolute;
      width: 32px;
      height: 36px;
      top: 52px;
      left: 26px;
    }

    
      .section-line {
        padding: 0 15px;
        font-size: 30px;
        color: #444444;
      }
      .address-line{
        padding: 0 15px;
        font-size: 30px;
        margin-top:14px;
        margin-bottom: 14px;
        // padding-right: 20px;
        color: #444444;
        line-height: 46px;
        span{
          // font-size: 12rem/37.5;

        }

      }
      .action-line{
        height: 70px;
        box-sizing: border-box;
        border-top: 1px solid #f3f5f9;
        .box{
          float: right;
          height: 70px;
          line-height: 70px;
          padding-right: 30px;
          font-size: 26px;
        
          a{
            margin-left: 40px;
            line-height: 70px;
            display: flex;
            color: #444444;
            align-items: center;
            i{
              width: 44px;
              height: 48px;
              margin-right: 10px;
              display: block;
              position:relative;
            }
            .edit::after{
              content:"";
              width:40px;
              height:44px;
              display:block;
              position:absolute;
              z-index:2;
              top:0;
              left:0;
              background: url('../assets/bianji.png') no-repeat;
              background-size: 100%;
            }
            .del::after{
              content:"";
              width:40px;
              height:44px;
              display:block;
              position:absolute;
              z-index:2;
              top:0;
              left:0;
              background: url('../assets/shanchu.png') no-repeat;
              background-size: 100%;
            }
          }
        }
      }
      .phone{
        font-size: 28px;
        float: right;
        margin-top: 0;
      }
  
    .right {
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width:44px;
      display: flex;
      align-items: center;
      img {
        width: 16px;
        height: 28px;
      }

    }
  }
  .container{
      width:100%;
      min-height: 100%;
      background: #f6f6f6;
  }
</style>

